<template>
  <view class="body">
    <view class="result">
      <view class="result_box">
        <view class="title">
          <view class="line" />
          <view class="text">疾病史</view>
        </view>
        <view class="result_content" v-if="result.elapseHisList && result.elapseHisList.length">
          <text class="result-item" v-for="(item, index) of result.elapseHisList" :key="index">
            {{ item }}
          </text>
        </view>
        <view v-else class="result_content">
          <text>暂无</text>
        </view>
      </view>
      <view class="result_box">
        <view class="title">
          <view class="line" />
          <view class="text">过敏史</view>
        </view>
        <view class="result_content" v-if="result.allergyHisList && result.allergyHisList.length">
          <text class="result-item" v-for="(item, index) of result.allergyHisList" :key="index">
            {{ item }}
          </text>
        </view>
        <view v-else class="result_content">
          <text>暂无</text>
        </view>
      </view>
      <view class="result_box">
        <view class="title">
          <view class="line" />
          <view class="text">家族史</view>
        </view>
        <view class="result_content" v-if="result.familyHisList && result.familyHisList.length">
          <text class="result-item" v-for="(item, index) of result.familyHisList" :key="index">
            {{ item }}
          </text>
        </view>
        <view v-else class="result_content">
          <text>暂无</text>
        </view>
      </view>
      <view class="result_box">
        <view class="title">
          <view class="line" />
          <view class="text">外伤史</view>
        </view>
        <view class="result_content" v-if="result.hurtHisList && result.hurtHisList.length">
          <text class="result-item" v-for="(item, index) of result.hurtHisList" :key="index">
            {{ item }}
          </text>
        </view>
        <view v-else class="result_content">
          <text>暂无</text>
        </view>
      </view>

      <view v-if="baseData.gender == '女性' && baseData.age > 8" class="result_box">
        <view class="title">
          <view class="line" />
          <view class="text">月经史</view>
        </view>
        <view class="result_content">
          <text>{{ result.periodData.length ? result.periodData.join('，') : '暂无' }}</text>
        </view>
      </view>
      <view v-if="baseData.gender == '女性' && baseData.age > 20" class="result_box">
        <view class="title">
          <view class="line" />
          <view class="text">婚育史</view>
        </view>
        <view class="result_content">
          <text>{{ result.marriageData.length ? result.marriageData.join('，') : '暂无' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { watch } from 'vue'
const props = defineProps({
  baseData: {
    type: Object,
    default: () => {}
  },
  result: {
    type: Object,
    default: () => {}
  }
})
</script>

<style lang="scss" scoped>
.body {
  .result {
    padding: 24rpx 32rpx;
    background: #fff;
    border-radius: 12rpx;

    .result_box {
      // padding-bottom: 40rpx;
      margin-bottom: 32rpx;
      border-bottom: 1rpx solid #e5e6eb;

      .title {
        margin-bottom: 16rpx;

        .line {
          display: inline-block;
          width: 8rpx;
          height: 28rpx;
          background: #00d1b6;
        }

        .text {
          display: inline-block;
          margin-left: 24rpx;
          font-size: 32rpx;
          font-weight: 700;
          color: #222;
        }
      }

      .result_content {
        padding: 8rpx 24rpx 0rpx;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 54rpx;
        color: #222;
        text-align: justify;
        // background: #fafafa;
        border-radius: 12rpx;

        .cell {
          display: flex;
          justify-content: space-between;
          padding: 34rpx 0;
          border-bottom: 1rpx solid #e5e6eb;

          .title {
            font-size: 30rpx;
            font-weight: 700;
            color: #333;
          }

          .content {
            width: 200rpx;
            font-size: 30rpx;
            font-weight: 400;
            color: #222;
            text-align: right;

            .more {
              width: 40rpx;
              height: 40rpx;
              transform: translateY(10rpx);
            }
          }
        }

        .cell:last-child {
          border: none;
        }
      }
    }

    .result_box:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
      border: none;
    }
  }
}

.result-item {
  display: inline-block;
  padding: 4rpx 18rpx 6rpx;
  margin-right: 32rpx;
  margin-bottom: 24rpx;
  font-size: 24rpx;
  line-height: 40rpx;
  color: #165dff;
  background: #e8f3ff;
  border-radius: 4rpx;
}
</style>
